import React, { Component } from 'react'
import './index.css';
import axios from 'axios';

export default class YiYan extends Component {
    //状态
    state = {
        info: {} //这里建议使用空对象, 当然也可以使用 []
    }

    render() {
        //获取 hitokoto 文本 以及 from 来自于
        let {info} = this.state
        return (
            <div className="yiyan-container">
                <div className="mask"></div>
                <div className="text-area">
                    <p>{info.hitokoto}</p>
                    <div className="from">--- {info.from}</div>
                </div>
            </div>
        )
    }

    //组件挂载完毕 钩子
    componentDidMount(){
        this.send();
        //批量
        this.timer = setInterval(() => {
            this.send();
        }, 5000)
    }

    //发送请求方法封装
    send = async () => {
        let result = await axios('https://v1.hitokoto.cn/');
        this.setState({
            info: result.data
        })
    }

    componentWillUnmount(){
        clearInterval(this.timer);
    }
}
